<template>
  <div class="folding">
    <div class="folding-con" :style="{'height': screenListHeight}">
      <div ref="screenList">
        <slot></slot>
      </div>
    </div>
    <el-button type="text" v-if="transitionIsOpen" @click="handleMore">更多</el-button>
  </div>
</template>

<script>

export default {
  name: 'foldingPanel',
  data () {
    return {
      heightClass: '',
      isActive: false,
      screenListHeight: '46px',
      transitionIsOpen: false
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.transitionIsOpen = this.$refs.screenList.clientHeight > 46
    })
  },
  methods: {
    handleMore () {
      // 更多
      this.transitionHeight = 'auto'
      if (this.screenListHeight === '46px') {
        this.screenListHeight = this.$refs.screenList.clientHeight + 'px'
        this.transitionIsOpen = this.$refs.screenList.clientHeight > 46
      } else {
        this.screenListHeight = '46px'
      }
      this.$emit('handleBtnMore')
    },
    handleMore1 () {
      this.isActive = !this.isActive
      this.heightClass = this.isActive ? 'auto-height' : ''
    }
  }
}
</script>

<style lang="scss" scoped>
  .folding {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-right: 20px;

    .folding-con {
      overflow: hidden;
      transition: height linear 0.4s;
      width: calc(100% - 100px);
    }

  }
</style>
